<template>
  <div class="project-funs-info">
    <span class="funs-title trapezoid-title">工程款信息</span>
    <a class="funs-search-all">
      <!-- <i class="el-icon-service"></i> -->
      <svg-icon class="svgClass" icon-class="check-all-icon" />
      查询全部</a>
    <ul class="funs-info-list">
      <li>
        <span class="funs-bookmark">
          <svg-icon class="svgClass" icon-class="shouru" />
          <span>收入</span>
        </span>
        <div class="funs-stat">
          <span class="funs-num">100000000<i>/元</i></span>
          <el-progress class="funs-progress" :show-text="false" :stroke-width="11" :percentage="65" />
        </div>
      </li>
      <li>
        <span class="funs-bookmark">
          <svg-icon class="svgClass" icon-class="zhifu" />
          <span>支付</span>
        </span>
        <div class="funs-stat">
          <span class="funs-num">100000000<i>/元</i></span>
          <el-progress class="funs-progress" :show-text="false" :stroke-width="11" :percentage="65" />
        </div>
      </li>
      <li>
        <span class="funs-bookmark">
          <svg-icon class="svgClass" icon-class="daifu" />
          <span>待付</span>
        </span>
        <div class="funs-stat">
          <span class="funs-num">100000000<i>/元</i></span>
          <el-progress class="funs-progress" :show-text="false" :stroke-width="11" :percentage="65" />
        </div>
      </li>
      <li>
        <span class="funs-bookmark">
          <svg-icon class="svgClass" icon-class="yingyu" />
          <span>盈余</span>
        </span>
        <div class="funs-stat">
          <span class="funs-num">100000000<i>/元</i></span>
          <el-progress class="funs-progress" :show-text="false" :stroke-width="11" :percentage="65" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
  .project-funs-info{
    position:relative;
    float:right;
    padding-bottom:5px;
    width:45.95%;
    height:100% !important;
    @include border-top-style;
    background:linear-gradient(180deg,rgba(99,245,245,0.19) 0%,rgba(24,58,58,0.19) 100%);
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    >.funs-title{
      width:22%;
      height:33px;
      position:absolute;
      top:0;
      left:40%;
      @include trapezoid;
    }
    .funs-search-all{
      position:absolute;
      top:23px;
      right:4.5%;
      color:rgba(99,245,245,1);
      @include fontSizeRem(14);
      text-decoration:underline;
      >i{
        @include fontSizeRem(20)
      }
      .svgClass{
        width:20px !important;
        height:20px !important;
        fill:#63F5F5 !important;
      }
    }
    .funs-info-list{
      margin-top:31px;
      padding:0;
      height:100%;
      li{
        height:121px;
        height:22% !important;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items : center;
        border-bottom:#63F5F5 1px dashed;
        >span.funs-bookmark{
          width:17.38%;
          height:64px;
          display:flex;
          flex-direction:column;
          justify-content: center;
          border-top-right-radius: 32px;
          border-bottom-right-radius: 32px;
          text-align:center;
          color:#fff;
          >.svgClass{
            margin:0 auto;
            width:changePxToRem(22) !important;
            height:changePxToRem(22) !important;
            fill:#fff !important;
          }
          @include fontSizeRem(14)
        }
        >div.funs-stat{
          padding-right:10px;
          width:78.57%;
          height:73px;
          >span.funs-num{
            display:inline-block;
            margin:8px 0 5px 0;
            height:33px;
            line-height:33px;
            color:rgba(99,245,245,1);
            @include fontSizeRem(16);
            font-weight:bold;
            opacity:1;
            font-weight:bold;
            >i{
              font-style: normal;
              @include fontSizeRem(12)
            }
          }
           .funs-progress{
            width:100%;
           ::v-deep .el-progress-bar__outer{
              background:-webkit-repeating-linear-gradient(left,rgba(65,66,67,1) 0,rgba(65,66,67,1) 5px,transparent 5px,transparent 10px);
              border-radius:0;
            }
            ::v-deep .el-progress-bar__inner{
              border-radius:0;
            }
          }
        }
        &:first-of-type{
          >span.funs-bookmark{
           background-color:#5C9D5C;
          }
          .funs-progress{
            ::v-deep .el-progress-bar__inner{
              @include progress-gradient;
            }
          }

        }
        &:nth-of-type(2){
          >span.funs-bookmark{
            background:rgba(181,78,0,1);
          }
          .funs-progress{
            ::v-deep .el-progress-bar__inner{
              @include progress-gradient(rgba(181,78,0,1));
            }
          }
        }
        &:nth-of-type(3){
          >span.funs-bookmark{
            background:rgba(178,178,37,1);
          }
          .funs-progress{
            ::v-deep .el-progress-bar__inner{
              @include progress-gradient(rgba(178,178,37,1));
            }
          }
        }
        &:last-of-type{
         >span.funs-bookmark{
            background:rgba(99,245,245,1);
          }
          .funs-progress{
            ::v-deep .el-progress-bar__inner{
              @include progress-gradient(rgba(99,245,245,1));
            }
          }
          border-bottom:none;
        }
      }
    }
  }
  .trapezoid-title{
    text-align: center;
    line-height:33px;
    @include fontSizeRem(14);
    color:rgba(255,255,255,1);
    background:rgba(53,128,128,1);
    z-index:1000;
    white-space:nowrap;
    @include trapezoid;
  }
  @media screen and (max-height: 937px){
    .project-funs-info{
      .funs-info-list{
        margin-top:28px;
        margin-bottom:6px;
        padding:0;
        li{
          height:108px;
        }
      }
    }
    .project-funs-info{
      .funs-info-list{
        li{
          >span.funs-bookmark{
            height:57px;
          }
        }
      }
    }
  }
@media screen and (max-height:768px){
 .project-funs-info{
    .funs-info-list{
      margin-top:20.77px;
      padding:0;
      li{
        height:71px;
         >div.funs-stat{
          >span.funs-num{
            @include fontSizeRem(12);
            >i{
              @include fontSizeRem(10);
            }
          }
         }
      }
    }
    >.funs-title{
      @include fontSizeRem(10);
      height:23px;
      line-height:23px;
    }
  }
  .project-funs-info{
      .funs-info-list{
        li{
          >span.funs-bookmark{
            height:42px;
            >.svgClass{
              width:changePxToRem(14) !important;
              height:changePxToRem(14) !important;
            }
            @include fontSizeRem(12)
          }
          >span{
            display:inline-block;
            margin:1px 0;
          }
        }
      }
      .trapezoid-title{
        @include trapezoid(23px,13px);
      }
    }
}
</style>
